<template>
  <div style="height: 100%;" >
    <template v-if="this.$route.path === '/home/actor-list'">
      <div class="item" v-for="item in actorList" :key="item.id">
        <img :src="item.actor_avatar" width="100px" :title="item.value">
        <div>{{ item.value }}</div>
        <i class="el-icon-circle-close" @click="clickIcon(item.id)"></i>
      </div>
    </template>

    <template v-if="this.$route.path === '/home/director-list'">
      <div class="item" v-for="item in actorList" :key="item.id">
        <img :src="item.director_avatar" width="100px" :title="item.value">
        <div>{{ item.value }}</div>
        <i class="el-icon-circle-close" @click="clickIcon(item.id)"></i>
      </div>
    </template>
  </div>
</template>

<script>
import httpApi from '@/http'

  export default {
    inject:['reload'],
    data() {
      return {
        actorList: [],
        type:''
      }
    },
    methods: {
      clickIcon(id) {
        this.$confirm('该演员将永久删除,是否继续?','提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning'
        }).then(()=>{

          if(this.$route.path === '/home/actor-list'){
            // 发送请求删除数据
            httpApi.actorApi.delete({id}).then(_=>{
              // 不可取整个页面刷新空白页面时间久
              // this.$router.go(0)

              this.reload()

              // 消息弹窗
              this.$message({
                type:'success',
                message: '删除成功'
              })
            })
          }else if(this.$route.path === '/home/director-list'){
            httpApi.directorApi.delete({id}).then(_=>{
              this.reload()
              // 消息弹窗
              this.$message({
                type:'success',
                message: '删除成功'
              })
            })
          }
          
        }).catch(() => {
          this.$message({
            // 消息弹窗
            type: 'info',
            message: '已取消删除'
          })
        })
       }
    },
    mounted () {
      this.$bus.$on('Actor',(data)=>{
        this.actorList = data
        console.log('data',data)
      });
      
      
    },
    destroyed () {
    // 取消对bus事件的监听
    this.$bus.$off(['Actor'])
  }
}
</script>

<style lang="scss" scoped>
  .item{
    // overflow: auto;
    width: 100px;
    height: 160px;
    font-size:0.9em;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
    i{
      position: absolute;
      top: -8px;
      right: -8px;
      font-size: 20px;
      background-color: #fff;
      border-radius: 50%;
      display: none;
    }
    div{
      overflow: hidden;
      white-space: nowrap;
      text-overflow:ellipsis ;
    }
  }
  .item:hover{
    cursor: pointer;
    opacity: 0.9;
  }
  .item:hover i{
    display: block;
    opacity: 1;
  }
</style>